<template>
  <div
      class="draggable-item"
      :class="{'active-from-item': activeId === element.formId }"
  >
    <div v-if="element.layout === 'colFormItem'">
      <el-col :span="element.span" class="draggable-item-col">
        <el-form-item
            @click.stop="clickComponent(element)"
            :class="{active: activeId === element.formId,unactive: activeId !== element.formId,'asSummary': element.asSummary,}"
            :label="element.label"
            :label-width="element.labelWidth ? `${element.labelWidth}px` : null"
            :required="element.required === true"
        >
          <component
              v-bind="{...element}"
              :type="element.type"
              :ref="(el)=>setRefMap(el,element)"
              :is="getElement(element)"
              v-model="element.defaultValue"
              :placeholder="element.placeholder"
              :disabled="element.disabled"
              :clearable="element.clearable"
              :readonly="element.readonly"
              :options="element.options"
              :multiple="element.multiple"
          >
          </component>
          <div class="draggable-item-tag">
            <span v-if="isNotEmptyArray(element.fieldEventTypeList)" class="draggable-item-tag-icon">
              <el-tag plain size="small" type="danger">级联字段</el-tag>
            </span>
            <div style="width: 100%; color: #889db5;">
              标签：{{ element.tag }}
              <el-divider direction="vertical"/>
              formId：{{ element.formId }}
              <el-divider direction="vertical"/>
              vModel：{{ element.vModel }}
              <!--              <el-divider direction="vertical"/>
                            defaultValue：{{ JSON.stringify(element) }}-->
            </div>
          </div>
        </el-form-item>
        <DrawingItemBtns :drawing-list="drawingList" :index="index"
                         @delete-item="emitDeleteItem(index, drawingList)"/>
      </el-col>
    </div>
    <div v-else-if="element.layout === 'rowFormItem'">
      <el-col :span="element.span">
        <el-row
            @click.stop="clickComponentTable(element)"
            :gutter="element.gutter"
            class="drawing-row-item"
            :class="{'is-table': element.rowType === 'table',active: activeId === element.formId,unactive: activeId !== element.formId}"
        >
          <span class="component-name">{{ element.label }}</span>
          <draggable
              v-model="element.children"
              item-key="formId"
              :animation="340"
              :group="{ name: 'componentsGroup', put: (...arg) => put(...arg, element) }"
              :disabled="element.cmpType === 'custom'"
              class="drag-wrapper-drag-item"
              chosen-class="wrapper-chosen"
              ghost-class="wrapper-ghost"
          >
            <template #item="{ element: childElement, index: childIndex }">
              <DraggableItem
                  @activeItem="activeItem"
                  :element="childElement"
                  :index="childIndex"
                  :drawing-list="element.children"
                  :active-id="activeId"
                  :form-conf="formConf"
                  @put="put"
                  @deleteItem="emitDeleteItem"
              />
            </template>
          </draggable>
          <DrawingItemBtns :drawing-list="drawingList" :index="index"
                           @delete-item="emitDeleteItem(index, drawingList)"/>
          <el-button
              v-if="element.rowType === 'table'"
              style="text-align: center; background: white; color: #4e79ff; padding: .4rem 1rem; width: 100%; cursor: pointer"
              @click="addTableItem"
          >
            <i class="el-icon-plus"/>
            {{ element.actionText }}
          </el-button>
        </el-row>
      </el-col>
    </div>
  </div>
</template>
<script setup name="DraggableItem">
import draggable from 'vuedraggable';
import {
  ElButton,
  ElCol,
  ElDivider,
  ElFormItem,
  ElRow,
  ElTag
} from 'element-plus';
import {isNotEmptyArray} from '@/views/flow/tool.js';
import DrawingItemBtns from "@/views/flow/createDirectly/generatorForm/DraggableItem/DraggableItemBtns.vue";
import {getElement} from "@/views/flow/formCompoents/getElement.js";
const props = defineProps({
  element: Object,
  index: Number,
  drawingList: Array,
  activeId: [String,
    Number],
  formConf: Object,
});
let refMap = {}
//设置ref
const setRefMap = (el,
                   element) => {
  if (!refMap[`ref_${element.vModel}`])
    refMap[`ref_${element.vModel}`] = el
}
const emit = defineEmits(['activeItem',
  'put',
  'deleteItem']);
const activeItem = (element) => {
  emit('activeItem',
      element);
};
const clickComponent = (el) => {
  activeItem(el)
}
const clickComponentTable = (el) => {
  activeItem(el)
}
const put = (...args) => {
  emit('put',
      ...args);
};
const emitDeleteItem = (index,
                        parent) => {
  emit('deleteItem',
      index,
      parent);
};
const addTableItem = () => {
  // 添加表格项的逻辑
};
</script>
<style lang="scss">
@import "../item.scss";
.draggable-item {
  position: relative;
  .draggable-item-col {
    & > .DraggableItemBtns {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
    }
    &:hover {
      & > .DraggableItemBtns {
        opacity: .8;
      }
    }
  }
  .drawing-row-item {
    margin: 0 !important;
    margin-bottom: 18px !important;
    & > .DraggableItemBtns {
      position: absolute;
      top: 0;
      right: 0;
      opacity: 0;
    }
    &:hover {
      & > .DraggableItemBtns {
        opacity: .8;
      }
    }
    .component-name {
      font-size: 12px;
      color: #171a1d66;
      position: relative;
      top: -6px;
    }
    .drag-wrapper-drag-item {
      width: 100%;
      min-height: 50px;
    }
    .wrapper-chosen {
      @extend .draggableItemCommonCss;
      @extend .draggableItemCommonCss-chosen;
    }
    .wrapper-ghost {
      @extend .draggableItemCommonCss;
      @extend .draggableItemCommonCss-ghost;
    }
  }
  &.wrapper-chosen {
    @extend .draggableItemCommonCss;
    @extend .draggableItemCommonCss-chosen;
  }
  &.wrapper-ghost {
    @extend .draggableItemCommonCss;
    @extend .draggableItemCommonCss-ghost;
  }
  .active {
    border: 1px dashed rgb(64, 158, 255);
    border-radius: 6px;
    background: #fff;
    padding: 4px;
    padding-top: 12px;
  }
  .unactive {
    border: 1px dashed #f8fafd;
    border-radius: 6px;
    padding: 4px;
    padding-top: 12px;
  }
  .active, .unactive {
    position: relative;
    &.asSummary {
    }
  }
  .is-table {
    background: none;
    &.active {
      border: 1px dashed rgb(64, 158, 255);
      border-radius: 6px;
    }
    &.unactive {
      border: 1px dashed #ccc;
      border-radius: 6px;
    }
  }
}
</style>
